<template>
    <div>
        <el-row type="flex" justify="space-between" class="border-bottom mb-3">

            <el-form :inline="true" class="demo-form-inline">

                <el-form-item label="目录:">
                    <el-dropdown>
                        <div class="el-dropdown-link">
                            <el-button type="text" v-on:click="loadFinderData('','')">根目录</el-button>
                            /
                            <template v-for="item in (finderData.path_breadcrumbs || [])">
                                <el-button type="text" v-on:click="loadFinderData(item.path,'')"
                                           v-text="item.title"></el-button>
                                /
                            </template>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="dir in (finderData.dirs || [])" v-bind:key="dir.path">
                                <el-button type="text" v-text="dir.name"
                                           v-on:click="loadFinderData(dir.path,finderData.type||'')"></el-button>
                                <el-button
                                        v-on:click="deleteFile(dir.path_relative||'')"
                                        type="text"
                                        class="text-danger"
                                        icon="el-icon-delete"
                                        size="mini" plain>

                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item label="类型:">
                    <el-dropdown>
                          <span class="el-dropdown-link">
                              <el-button type="text" v-on:click="loadFinderData(finderData.path||'',finderData.type||'')"
                                         v-text="finderData.type_name"></el-button>

                              <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button type="text"
                                           v-on:click="loadFinderData(finderData.path||'','')">全部
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item v-for="(value, name) in (finderData.types || {})" :key="name">
                                <el-button type="text" v-on:click="loadFinderData(finderData.path||'',name)"
                                           v-text="value"></el-button>

                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model="searchKeyword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" @click="loadFinderData(finderData.path||'',finderData.type||'')">搜索
                    </el-button>
                </el-form-item>
            </el-form>
            <div>
                <upload-file :file-disk="fileDisk"
                             v-on:upload-success="loadFinderData(finderData.path||'',finderData.type||'')"
                             :accept="accept"
                             :multiple="true" :select-file-callback="selectFileCallback"></upload-file>
            </div>
        </el-row>


        <el-row type="flex" justify="space-between" style="flex-wrap: wrap">
            <el-card class="mb-3" v-for="(file,index) in (finderData.files || {})" :key="index"
                     style="height: 15rem;width: 12rem">
                <div class="image w-100 " style="height: 9rem">
                    <img v-if="'image'==file.type" class="mw-100 mh-100 mx-auto d-block" :src="file.url_thumb||file.url"
                         :alt="file.name">

                    <audio v-else-if="'audio'==file.type" class="mw-100 mh-100" :src="file.url"
                           controls="controls">
                        您的浏览器不支持 audio 标签。
                    </audio>

                    <video v-else-if="'video'==file.type" class="mw-100 mh-100" :src="file.url"
                           controls="controls">
                        您的浏览器不支持 video 标签。
                    </video>
                    <div v-else>
                        <i class="el-icon-files" ></i>

                        <el-link v-if="file.url" :href="file.url" target="_blank">{{file.name}}</el-link>

                    </div>

                </div>

                <div class="">
                    <div class="text-truncate " v-text="file.name"
                         :title="file.name">
                    </div>
                    <div class="d-flex bottom clearfix" >
                        <div type="info" class="flex-grow-1 small text-black-50" >
                            {{file.time_format}}
                        </div>

                        <el-button
                                v-on:click="choseFinderFile(file)"
                                type="primary"
                                size="mini" >
                            使用
                        </el-button>
                        <el-button
                                v-on:click="deleteFile(file.path_relative||'')"
                                type="text"
                                class="text-danger"
                                icon="el-icon-delete"
                                size="mini" >
                        </el-button>
                    </div>

                </div>
            </el-card>
        </el-row>
    </div>


</template>
<style>

</style>
<script>
  export default {
    props: {
      fileDisk: {
        type: String,
        default: ''
      },
      selectFileCallback: {
        type: Function,
        default: null
      },
      accept: {
        type: String,
        default: '*.*'
      },
    },
    data() {
      return {
        searchKeyword: '',
        finderData: {}
      }
    },
    created() {
      let _this = this;
      //console.log(this);

    },
    mounted() {
      let _this = this;

    },
    methods: {
      loadFinderData: function (path, type) {
        let _this = this;

        Axios.quiet().post(LeUtils.valueGet(_this.connector, 'apiFinder'), {
          connector_id: _this.getConnectorId(),
          path: path || '',
          type: type || '',
          keyword: _this.searchKeyword || ''
        })
          .then(function (res) {
            let resStatus = res.status || false;
            let resData = res.data || '';
            if (resStatus && resData) {
              _this.finderData = resData;
              _this.searchKeyword = LeUtils.valueGet(resData, 'keyword', '') || ''
            }
          });
      },
      choseFinderFile: function (file) {
        this.$emit('chose', file)
      },
      deleteFile: function (path) {
        let _this = this;

        if (!confirm('删除后不可恢复，是否确认?')) {

          return false;
        }
        Axios.post(LeUtils.valueGet(_this.connector, 'apiFinderDelete'), {
          connector_id: _this.getConnectorId(),
          path: path || ''
        })
          .then(function (res) {
            let resStatus = res.status || false;
            if (resStatus) {
              _this.$message.success('删除成功');
              _this.loadFinderData(_this.finderData.path || '', _this.finderData.type || '')
            }
          });
      }

    }


  }
</script>
